<template>
    <div>
        <h4>我是裁切图片组件</h4>
        <div class="cutbox">
            <div class="leftbox">
                <div
                    class="imgbox"
                    ref="imgbox"
                    :style="{ width: width + 'px', height: height + 'px' }"
                >
                    <vue-draggable-resizable
                        v-if="width != 0 && height != 0"
                        class="cut"
                        :w="cw"
                        :h="ch"
                        @dragging="onDrag"
                        @resizing="onResize"
                        :parent="true"
                        :style="{'backgroundImage': `url(http://127.0.0.1:3000/${filename})`,'backgroundSize':calcusize(),'backgroundPosition':calcuposition()
                        }"
                    >
                    
                    </vue-draggable-resizable>
                </div>
            </div>
            <div class="rightbox">
                <div class="xiao">
                    <img
                        :src="`http://127.0.0.1:3000/${filename}`"
                        alt=""
                        :style="{
                            width: calcuwidth(60),
                            height: calcuheight(60),
                            top: calcutop(60),
                            left: calculeft(60)
                        }"
                    />
                </div>
                <div class="zhong">
                    <img
                        :src="`http://127.0.0.1:3000/${filename}`"
                        alt=""
                        :style="{
                            width: calcuwidth(120),
                            height: calcuheight(120),
                            top: calcutop(120),
                            left: calculeft(120)
                        }"
                    />
                </div>
                <div class="da">
                    <img
                        :src="`http://127.0.0.1:3000/${filename}`"
                        alt=""
                        :style="{
                            width: calcuwidth(180),
                            height: calcuheight(180),
                            top: calcutop(180),
                            left: calculeft(180)
                        }"
                    />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import VueDraggableResizable from "vue-draggable-resizable";
import "vue-draggable-resizable/dist/VueDraggableResizable.css";
export default {
    // 组件上树后
    mounted() {
        const img = new Image();
        img.src = `http://127.0.0.1:3000/${this.filename}`;
        // 添加类名
        img.className = "pic";
        // 上树
        this.$refs.imgbox.appendChild(img);
        // 监听图片加载事件，加载完毕返回宽高
        img.onload = () => {
            console.log(img.width, img.height);
            this.ow = img.width;
            this.oh = img.height;
            // 得到图片原始宽高后，再给图片样式设置一个最大宽高，这样就不会影响图片
            img.style.maxWidth = 500 + "px";
            img.style.maxHeight = 600 + "px";
            // 把显示宽高（压缩后的）存起来
            this.width = parseInt(getComputedStyle(img).width);
            this.height = parseInt(getComputedStyle(img).height);
            console.log(this.width, this.height);
        };
    },
    components: {
        VueDraggableResizable
    },
    props: ["filename"],
    data: function() {
        return {
            // 图片原始宽高
            ow: 0,
            oh: 0,
            // 图片显示宽高
            width: 0,
            height: 0,
            // 裁切框宽,高,x,y
            cw: 100,
            ch: 100,
            x: 0,
            y: 0
        };
    },
    methods: {
        onResize(x, y, width, height) {
            this.x = x;
            this.y = y;
            this.cw = width;
            this.ch = height;
        },
        onDrag(x, y) {
            this.x = x;
            this.y = y;
        },
        calcuwidth(n) {
            return (this.width / this.cw) * n + "px";
        },
        calcuheight(n) {
            return (this.height / this.ch) * n + "px";
        },
        calcutop(n) {
            return ((-1 * this.y) / this.ch) * n + "px";
        },
        calculeft(n) {
            return ((-1 * this.x) / this.cw) * n + "px";
        },
        calcusize(){
            return this.width+'px '+this.height+'px' ;
        },
        calcuposition(){
            return '-'+this.x+'px -'+this.y+'px';
        }
    }
};
</script>

<style lang="less" scoped>
.cutbox {
    width: 800px;
    height: 600px;
    border: 1px solid #000;
    box-sizing: content-box;
    .leftbox {
        box-sizing: content-box;
        float: left;
        width: 500px;
        height: 600px;
        background-image: url("../../../public/images/u=4191890051,2096954726&fm=26&gp=0.jpg");
        position: relative;
        .imgbox {

            border: 1px solid rgb(218, 8, 8);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            &::before{
                content:'';
                width: 100%;
                height: 100%;
                background-color: rgba(104, 101, 101, 0.562);
                position: absolute;
                top: 0;
                left: 0;
                // z-index: 9999;

            }
            .pic {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
            .cut {
                border: 1px solid #000;
                // overflow: hidden;
                
            }
            
        }
    }
    .rightbox {
        float: left;
        width: 300px;
        height: 600px;
        .da {
            overflow: hidden;
            border: 1px solid #000;
            width: 180px;
            height: 180px;
            margin-top: 30px;
            margin-left: 30px;
            position: relative;
            img {
                position: absolute;
            }
        }
        .zhong {
            overflow: hidden;
            border: 1px solid #000;
            width: 120px;
            height: 120px;
            margin-left: 30px;

            position: relative;
            img {
                position: absolute;
            }
        }
        .xiao {
            overflow: hidden;
            border: 1px solid #000;
            width: 60px;
            height: 60px;
            margin: 30px;
            position: relative;
            img {
                position: absolute;
            }
        }
    }
}
</style>
